<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(menu,index) in curMenu" :key="menu.code">
        <!-- <span class="no-redirect" @click="handleSelect(menu.code,index)">{{ menu.title }}</span> -->
        <span v-if="index==curMenu.length-1" class="no-redirect">{{ menu.title }}</span>
        <a v-else @click.prevent="handleLink(menu.code,index)">{{ menu.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  findMenu,
  findFirstChild,
  recursionFindMenuByCode
} from '@/utils/menusUtil'
// import pathToRegexp from 'path-to-regexp'
export default {
  data() {
    return {
      levelList: null
    }
  },
  computed: {
    ...mapGetters(['menus', 'curMenu', 'codeMenu'])
  },
  watch: {
    // 监听点击的面包屑菜单的变化 跳转对应地址
    codeMenu(menu) {
      const child = findFirstChild(menu)
      this.$router.push({ name: child.code })
    }
  },
  created() {
    // this.getBreadcrumb();
  },
  methods: {
    // 点击面包屑跳转
    handleLink(code, index) {
      this.$store.state.menus.codeMenu = null
      //  获取当前code所在的菜单
      recursionFindMenuByCode(this.menus, code)
      // let menu = recursionFindMenuByCode(this.menus, code);
      // let child = findFirstChild(menu);
      // this.$router.push({ name: child.code });
    }
    // getBreadcrumb() {
    //   let matched = this.$route.matched.filter(item => item.name);
    //   const first = matched[0];
    //   // if (first && first.name !== "Dashboard") {
    //     matched = [{ path: "/", meta: { title: "首页" } }].concat(this.curMenu);
    //   // }
    //   this.levelList = matched;
    // },
    //   pathCompile(path) {
    //   const { params } = this.$route
    //   var toPath = pathToRegexp.compile(path)
    //   return toPath(params)
    // },
    // handleLink(item) {
    //   const { redirect, path } = item;
    // if (redirect) {
    //   this.$router.push(redirect);
    //   return;
    // }
    // this.$router.push(this.pathCompile(path));
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    line-height: 30px;
    .no-redirect {
      color: #909399;
      cursor: text;
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-breadcrumb__inner.is-link,
  .el-breadcrumb__inner a {
    // color: #909399;
  }

  .el-breadcrumb__inner.is-link,
  .el-breadcrumb__inner a:hover {
    color: #303133;
  }
</style>
